import React, { Component, Fragment } from 'react'
import Swiper from  "swiper"
import "swiper/swiper-bundle.css";

import {Swipers,OneDiv} from "../styled/index";

import Onediv from "../components/index/onediv";
import Topbar from "../components/topbar"
// import SwiperJs from "swiper/swiper-bundle.min.js";
// import andt from "antd"
// import 'antd/dist/antd.css';

import {MenuOutlined,UserOutlined} from "@ant-design/icons";
import { apilink } from '../api/apilink';

import {connect} from "react-redux";
import {textdata} from "../store/actionCreator"
class index extends Component {
    constructor(props){
        super(props)
        this.state={
            totalsEssay:""
        }
        this.jumpRouter = this.jumpRouter.bind(this)
    }
    componentDidMount(){
        
        new Swiper('.swiper-container', {
                direction: 'vertical',
                pagination: {
                // el: '.swiper-pagination',
                autoHeight: true,
                clickable: true,
                // height: 300
                // height : window.innerHeight
                },
            });
            // var mySwiper = new Swiper('.swiper-container', {
            //     direction: 'vertical',
            //     height: 300,//你的slide高度
            //     //全屏  height : window.innerHeight,
            //   }) 

            //请求数据
            apilink("http://localhost:4000/essay","get").then((ok)=>{
                console.log(ok);
                this.props.dispatch(textdata(ok))
                console.log(this.props.state.textReducer.state)
                this.setState({
                    totalsEssay: this.props.state.textReducer.state
                })
        
            }).catch((err)=>{
                console.log(err)
            })
        
    }

    jumpRouter(){
        this.props.history.push("/router")
    }
    
    render() {
        return (
            <Fragment>
                {/* 组件 */}
                <OneDiv>
                <Topbar>
                    <MenuOutlined onClick={this.jumpRouter}/>
                    <p>單讀</p>
                    <UserOutlined />
                </Topbar>
                <Swipers>
                    <div className="swiper-container">
                        <div className="swiper-wrapper">
                            <Onediv totalsEssay={this.state.totalsEssay}></Onediv>
                        {/* <div className="swiper-slide" id="swiper-slide-id"><Onediv></Onediv></div> */}
                        <div className="swiper-slide">2</div>
                        </div>
                    </div>

                </Swipers>
                </OneDiv>
            </Fragment>
        )
    }
}
export default connect((state)=>({state}))(index);